<template>
  <view class="tag-selector">
    <view 
      v-for="tag in tags" 
      :key="tag"
      class="tag-item"
      :class="{ 'selected': isSelected(tag) }"
      @click="toggleTag(tag)"
    >
      <text>{{ tag }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'TagSelector',
  props: {
    tags: {
      type: Array,
      required: true
    },
    value: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    isSelected(tag) {
      return this.value.includes(tag);
    },
    toggleTag(tag) {
      const newValue = [...this.value];
      const index = newValue.indexOf(tag);
      
      if (index > -1) {
        newValue.splice(index, 1);
      } else {
        newValue.push(tag);
      }
      
      this.$emit('input', newValue);
    }
  }
}
</script>

<style scoped>
.tag-selector {
  display: flex;
  flex-wrap: wrap;
}

.tag-item {
  margin: 10rpx;
  padding: 10rpx 20rpx;
  background-color: #f0f0f0;
  border-radius: 20rpx;
}

.tag-item.selected {
  background-color: #3cc51f;
  color: white;
}
</style> 